import React, { useState, useEffect } from "react";

import store from "./store/index-a";
import { boundIncrement, boundDecrement, aa } from "./store/actions";

export default function App() {
  const [state, setState] = useState(store.getState());

  useEffect(() => {
    const unSubscribe = store.subscribe(() => {
      setState(store.getState());
    });

    return () => {
      // 收尾工作，取消订阅
      unSubscribe();
    };
  }, []);

  return (
    <div>
      <h1>App - {state.count}</h1>

      <button
        onClick={() => {
          // boundIncrement();
          store.dispatch({
            type: "increment",
          });
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          // boundDecrement();
          store.dispatch({
            type: "decrement",
          });
        }}
      >
        -
      </button>
      <button
        onClick={() => {
          // 下面的 setTimeout 是一个异步操作
          //    这段代码是在组件上将异步处理完之后，再去派发一个动作
          //    我们希望这段异步的代码能跟动作放在一起去写该如何玩。
          // setTimeout(() => {
          //   boundIncrement();
          // }, 1000);

          // 希望如下代码生效，也就是dispatch传递了一个函数的话。需要使用 redux-thunk 中间件
          store.dispatch(function (dispatch) {
            setTimeout(() => {
              dispatch({
                type: "increment",
              });
            }, 2000);
          });
          // store.dispatch(aa);
        }}
      >
        隔一秒之后在添加
      </button>
    </div>
  );
}
